<template>
 <div class="layout">
    <div class="main-header">
      <img :src="logo" class="logo" alt="">
      <h2 class="title">麦阿尼翻译</h2>
      <ul class="menuList">
        <li v-for="item in menuList" :key="item.name" :class="{active: item.name==activeMenu}" class="menuItem" @click="menuClick(item.name)">{{ item.label }}</li>
      </ul>
      <div class="lang">
        <el-dropdown @command="langClick">
          <el-button>
            {{ activeLang.name }} {{ activeLang.label }} <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="la in langList" :key="la.label" :command="la">{{ la.name }} {{ la.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="vip">
        <el-button type="danger">VIP</el-button>
      </div>
      <div class="">
        
        <el-dropdown>
            <span class="userinfo">
              <img :src="logo" class="avatar" alt="">
              <span>{{ '安东尼' }}</span>
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </div>
    <div ref="mainBodyRef" class="main-body">

      <div class="main-content">
        <router-view :key="route.name" />
      </div>
  
      <div class="main-footer">
        <div class="c">Copyright © 2024 chatvip, Inc </div>
        <div class="links">
          <a href="##">{{ $t('app.Resources') }}</a>
          <a href="##">{{ $t('app.Products') }}</a>
          <a href="##">{{ $t('app.Downloads') }}</a>
          <a href="##">{{ $t('app.Company') }}</a>
        </div>
        <div class="imgs">
          <img :src="facebook" alt="">
          <img :src="twiter" alt="">
          <img :src="instagram" alt="">
          <img :src="email" alt="">
          <img :src="WeChat" alt="">
        </div>
      </div>
    </div>
 </div>
</template>
<script setup name="layout">
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { removeToken } from '@/utils/auth'
import logo from '@/assets/logo.png'
import email from '@/assets/images/email.png'
import facebook from '@/assets/images/facebook.png'
import instagram from '@/assets/images/instagram.png'
import twiter from '@/assets/images/twiter.png'
import WeChat from '@/assets/images/WeChat.png'
import { useI18n } from 'vue-i18n'
const router = useRouter()
const route = useRoute()
const { locale, t } = useI18n()

const user = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
const mainBodyRef = ref(null)

const menuList = reactive([
  { name: 'home', label: t('home.name') },
  { name: 'translate', label: t('translate.name') },
  { name: 'aboutApp', label: t('aboutApp.name') },
  { name: 'about', label: t('about.name') }
])

const activeMenu = ref(route.name)
const menuClick = (val) => {
  activeMenu.value = val
  mainBodyRef.value.scrollTop = 0
  router.push(`/${val}`)
}

const activeLang = ref({})
const langList = reactive([
  { name: 'zh', label: t('lang.zhcn'), value: 'zhcn' },
  { name: 'ar', label: t('lang.ar'), value: 'ar' },
  { name: 'fr', label: t('lang.fr'), value: 'fr' },
  { name: 'en', label: t('lang.en'), value: 'en' },
  { name: 'zh', label: t('lang.zhtw'), value: 'zhtw' },
  { name: 'zh', label: t('lang.zhhk'), value: 'zhhk' },
  { name: 'fa', label: t('lang.fa'), value: 'fa' },
  { name: 'ur', label: t('lang.ur'), value: 'ur' },
  { name: 'jp', label: t('lang.jp'), value: 'jp' },
])
const langClick = (obj) => {
  activeLang.value = obj
  const lang = obj.value
  locale.value = lang
  localStorage.setItem('lang', lang)
}

langClick(langList.find(v => locale.value == v.value) || langList[0])

const logout = () => {
  localStorage.removeItem('userInfo')
  removeToken()
  router.push('/login')
}
</script>
<style lang="scss">
.layout {
  width: 100%;
  height: 100%;
  position: relative;

  .main-header {
    width: 100%;
    height: 70px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 0 30px 0 70px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(235, 235, 235, 1);

    .logo {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .title {
      margin-right: 50px;
    }
    .menuList {
      display: flex;
      margin: 0 20px;
      align-items: center;
      flex: 1;
      .menuItem {
        margin: 0 30px;
        cursor: pointer;
        font-size: 16px;
        width: 64px;
        text-align: center;
        &:hover, &.active {
          color: #000;
          font-weight: bold;
        }
      }
    }
    .lang {
      margin-right: 20px;
    }
    .vip {
      margin-right: 20px;
    }
    .userinfo {
      display: flex;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .main-body {
    height: calc(100vh - 70px);
    background: linear-gradient(to right bottom, rgba(179, 212, 255, 1) 0%, rgb(245,245,245) 40%);
    overflow: auto;
  }
  .main-content {
    min-height: calc(100% - 60px);
  }
  .app-container {
    width: 100%;
    height: 100%;
    padding: 50px 16px 0 16px;
    .content {
      width: 100%;
      height: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }
  }

  .main-footer {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 50px;
    .c {
      font-size: 14px;
      color: #666;
      margin-right: 30px;
    }
    .links {
      flex: 1;
      a {
        margin: 0 10px;
        color: rgb(212,212,212);
        font-size: 14px;
        cursor: pointer;
        // 去除下划线
        text-decoration: none;
      }
    }
    .imgs {
      margin-top: 10px;
      img {
        width: 24px;
        height: 24px;
        margin: 0 10px;
      }
    }
  }
}
</style>